@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --royal-blue: #0d0b56;
    --light-blue: #1e3a8a;
    --accent-blue: #3b82f6;
    --black: #000000;
    --white: #ffffff;
    --gray: #e5e7eb;
    --dark-gray: #9ca3af;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(59, 130, 246, 0.3);
    --shadow-primary: 0 20px 60px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 30px 60px rgba(59, 130, 246, 0.3);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* CORRECTION DU DÉCALAGE ICI */
    background: linear-gradient(135deg, var(--black) 0%, var(--royal-blue) 100%);
    background-attachment: fixed; /* Le dégradé reste fixe et ne se répète pas */
    background-size: cover;       /* Couvre tout l'écran */
    background-repeat: no-repeat; /* Empêche la répétition (la ligne de coupure) */
    
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: smooth;
    min-height: 100vh;
}

/* ==================== PARTICULES D'ARRIÈRE-PLAN ==================== */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--accent-blue);
    border-radius: 50%;
    animation: float-particles 20s infinite linear;
    opacity: 0.6;
}

@keyframes float-particles {
    0% { 
        transform: translateY(100vh) rotate(0deg); 
        opacity: 0; 
    }
    10% { 
        opacity: 0.6; 
    }
    90% { 
        opacity: 0.6; 
    }
    100% { 
        transform: translateY(-100vh) rotate(360deg); 
        opacity: 0; 
    }
}

/* ==================== NAVIGATION ==================== */
header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

header.scrolled {
    padding: 0.5rem 0;
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.navbar {
    height: 80px;         /* set navbar height */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;         /* horizontal padding only */
    max-width: 1400px;
    margin: 0 auto;
}


.logo {
    position: relative;
    
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}


/* ==================== LOGO AVEC EFFETS ==================== */
.logo img {
    height: 90px;
    width: auto;
    /* État de base : une lueur bleue douce */
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
    /* Animation continue de pulsation */
    animation: logoBreathe 4s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transition élastique au survol */
}

/* Effet au survol : La lumière devient intense et l'image grandit */
.logo img:hover {
    transform: scale(1.1); /* Agrandissement */
    /* Lueur très intense et plus large + augmentation de la luminosité interne */
    filter: drop-shadow(0 0 25px rgba(59, 130, 246, 1)) brightness(1.1);
    /* On met l'animation en pause pendant le survol pour fixer l'état intense */
    animation-play-state: paused;
}

/* Définition de l'animation de "respiration" */
@keyframes logoBreathe {
    0%, 100% {
        /* État calme */
        filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
        transform: scale(1);
    }
    50% {
        /* État "inspiré" : lumière plus forte, léger grossissement */
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8));
        transform: scale(1.03);
    }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.5rem;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    color: var(--gray);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    position: relative;
    backdrop-filter: blur(10px);
    display: block;
}

.nav-menu a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 1px;
    background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--white);
    background: var(--glass-bg);
    transform: translateY(-2px);
}

.nav-menu a:hover::before,
.nav-menu a.active::before {
    opacity: 1;
}

.btn-main {
    padding: 0.9rem 2rem;
    background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.4s ease;
    border: 2px solid transparent;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    display: inline-block;
    cursor: pointer;
}

.btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
    border-color: var(--accent-blue);
    background: linear-gradient(135deg, var(--royal-blue), var(--accent-blue));
}

.hamburger {
    display: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--white);
    transition: transform 0.3s ease;
}

.hamburger:hover {
    transform: scale(1.1);
}

/* ==================== HERO SECTION (Vidéo + Centrage Parfait) ==================== */

/* 1. Conteneur Principal */
.hero {
    width: 100vw;        /* Force la largeur totale du viewport (fenêtre) */
    max-width: 100%;     /* Annule la restriction de 1400px des autres sections */
    height: 100vh;       /* Force la hauteur totale de l'écran */
    min-height: 600px;   
    
    /* FLEXBOX POUR LE CENTRAGE */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;     
    
    position: relative;
    overflow: hidden;    
    padding: 0;          
    margin: 0;           /* Annule les marges auto */
    background: transparent !important; 
    left: 0;             /* S'assure qu'il commence bien à gauche */
}

/* 2. Style de la vidéo (Arrière-plan) */
.back-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* La vidéo couvre tout sans déformation */
    z-index: -2;
}

/* 3. Overlay (Filtre sombre) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 1, 41, 0.8); /* Bleu nuit semi-transparent */
    z-index: -1;
}

/* 4. Contenu Texte (Au premier plan) */
.hero-content {
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */
    height: 50vh;           /* full hero height */
    text-align: center;      /* center text inside container */
    margin-top: -10px;
    flex-direction: column;
}

.hero-center {
    display: flex;
    flex-direction: column; /* stack text and logo vertically */
    align-items: center;
    gap: 0px; /* smaller gap between text (or countdown) and logo */
    margin-top: -150px;
}




.hero-center h2 {
    color: white;           /* make text white */
    font-size: 2rem;
}

.hero-logo {
    height: 20px;          /* bigger logo */
    width: auto;
    margin-bottom: 2px;
}


/* Ajustement du titre pour l'équilibre */
.hero h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Ombre pour lisibilité sur vidéo */
}

/* =======================
   NOUVEAU NEWS TICKER (POSITIONNEMENT BAS)
======================= */

/* 1. Positionnement sur la vidéo */
.news-ticker-section {
    position: absolute;
    bottom: 0;          /* Collé en bas */
    left: 0;
    width: 100%;
    z-index: 2;        /* Au-dessus de la vidéo */
}

/* 2. Style du Ticker (Votre code intégré) */
.news-ticker {
    width: 100%;
    /* Adaptation aux couleurs de votre site (Bleu Nuit / Royal) */
    background: rgba(13, 11, 86, 0.9); 
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.2rem 0;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4);
    display: flex; /* Pour aligner Badge et Texte sur une ligne si voulu */
    align-items: center;
}

/* Breaking News Label */
.news-ticker__header {
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(255,255,255,0.1); /* Séparateur vertical */
    flex-shrink: 0;
}

.breaking-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
    color: white;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.breaking-badge__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Scroll Container */
.news-ticker__wrapper {
    position: relative;
    padding: 0 1.5rem;
    overflow: hidden;
    flex-grow: 1; /* Prend tout l'espace restant */
    mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
}

.news-ticker__scroll {
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    align-items: center;
}

.news-ticker__scroll::-webkit-scrollbar {
    display: none;
}

.news-ticker__content {
    display: flex;
    gap: 3rem; /* Espace entre les news */
    min-width: max-content;
}

/* Style des items individuels */
.news-item__container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-item__category {
    color: var(--accent-blue);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    border: 1px solid var(--accent-blue);
    padding: 2px 8px;
    border-radius: 4px;
}

.news-item__title {
    color: #e5e7eb;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .news-ticker {
        flex-direction: column; /* Empile Badge et Texte sur mobile */
        align-items: flex-start;
        gap: 0.5rem;
    }
    .news-ticker__header {
        border-right: none;
        padding-bottom: 0.5rem;
    }
}

/* ==================== PAGE HEADER ==================== */
.page-header {
    padding: 150px 5% 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 50%);
    animation: pulse 8s ease-in-out infinite;
}

.page-header h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--white) 0%, var(--accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

/* ==================== SECTIONS PRINCIPALES ==================== */
main {
    position: relative;
    z-index: 1;
    padding-bottom: 5rem;
}

section {
    padding: 5rem 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.section-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
    background: linear-gradient(135deg, var(--white), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
}

/* ==================== SECTION PRÉSENTATION & VISION ==================== */

#presentation-section {
    padding: 4rem 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.presentation-block {
    display: flex;
    align-items: center;
    gap: 4rem; /* Espace entre texte et image */
    margin-bottom: 2rem;
}

/* Classe pour inverser l'ordre (Image à gauche, Texte à droite) */
.presentation-block.reverse {
    flex-direction: row-reverse; /* C'est cette ligne qui fait la magie */
    text-align: left; /* Garde le texte aligné à gauche pour la lisibilité */
}

.text-content {
    flex: 1;
}

.visual-content {
    flex: 1;
    display: flex;
    justify-content: center;
}

.presentation-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--white); /* Titre en blanc */
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

/* Petite ligne bleue sous le titre */
.presentation-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--accent-blue);
    margin-top: 10px;
    border-radius: 2px;
}

.text-content p {
    color: var(--gray);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* Image avec cadre néon subtil */
.image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid var(--glass-border);
    max-width: 550px;
    width: 100%;
    transition: transform 0.3s ease;
}

.image-wrapper:hover {
    transform: translateY(-10px); /* L'image flotte au survol */
    border-color: var(--accent-blue);
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* RESPONSIVE : Sur mobile, on empile tout */
@media (max-width: 968px) {
.presentation-block, 
    .presentation-block.reverse {
        flex-direction: column-reverse; /* Image en haut, Texte en bas sur mobile */
        text-align: center;
    }

    .presentation-title::after {
        margin: 10px auto 0; /* Centre la ligne sous le titre */
    }

    .text-content p {
        text-align: left; /* Ou center selon préférence */
    }
}

/* ==================== CONCEPT BOX (THEME) ==================== */

.theme-box {
    background: radial-gradient(circle at center, rgba(30, 58, 138, 0.3), rgba(0,0,0,0.4));
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 4rem 3rem;
    position: relative;
    overflow: hidden;
    margin: 3rem auto;
    box-shadow: 0 0 40px rgba(13, 11, 86, 0.5);
    max-width: 1000px;
}

/* Icône en fond (filigrane) */
.theme-icon {
    font-size: 15rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.03); /* Très transparent */
    z-index: 1;
    pointer-events: none;
}

.theme-box .text-center {
    position: relative;
    z-index: 2; /* Texte au-dessus de l'icône */
}

.main-theme-title {
    color: var(--white);
    font-weight: 800;
}

.highlight {
    color: var(--accent-blue);
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.theme-description p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--gray);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ==================== EVENT GRID ==================== */
.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.event-card {
    background: linear-gradient(135deg, rgba(13, 11, 86, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 25px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--glass-border);
    position: relative;
    cursor: pointer;
}

.event-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 25px;
    padding: 1px;
    background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.event-card:hover {
    transform: translateY(-15px) rotateX(5deg);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-blue);
}

.event-card:hover::before {
    opacity: 1;
}

.event-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: all 0.5s ease;
}

.event-card:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.event-info {
    padding: 1rem;
    position: relative;
    z-index: 0;
}

.event-info h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: var(--white);
    background: linear-gradient(135deg, var(--white), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.event-info p {
    color: var(--gray);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
}

/* ==================== TEAM CARDS (STYLE CADRE FIXE & NÉON) ==================== */

.team-grid {
    display: grid;
    /* On garde votre grille responsive optimisée */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    justify-items: center;
}

/* 1. LE CONTENEUR (Plus de 3D, juste un cadre élégant) */
.book {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 380px;
    
    /* STYLE CADRE "MUN" */
    border: 2px solid var(--accent-blue); /* Bordure Bleu Néon */
    border-radius: 20px;
    background: #000; /* Fond noir pour éviter la transparence */
    overflow: hidden; /* Coupe tout ce qui dépasse */
    
    /* OMBRES & ÉCLAT */
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2), inset 0 0 20px rgba(59, 130, 246, 0.1);
    
    /* Plus de perspective ni de rotation 3D */
    transform: none !important;
    perspective: none !important;
    transition: all 0.4s ease;
}

/* Effet au survol : la carte monte et brille plus fort */
.book:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4), inset 0 0 30px rgba(59, 130, 246, 0.2);
    border-color: #fff; /* Le cadre devient blanc brillant */
}

/* 2. L'IMAGE (Fixe, remplit tout le cadre) */
.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0; /* Le radius est géré par le parent .book */
    background: transparent;
    border: none;
    transform: none !important; /* Annule la rotation du livre */
    box-shadow: none;
    z-index: 1;
}

.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image couvre tout sans déformation */
    transition: transform 0.5s ease;
}

/* Zoom léger de la photo au survol */
.book:hover .cover img {
    transform: scale(1.1);
}

/* 3. LE TEXTE (Nom & Rôle) */
.book-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    z-index: 2;
    
    /* Fond dégradé pour rendre le texte lisible sur la photo */
    background: linear-gradient(to top, rgba(13, 11, 86, 0.95) 20%, transparent 100%);
    
    /* On force l'affichage (plus de cache-cache comme le livre) */
    opacity: 1 !important; 
    transform: translateY(0) !important;
    text-align: center;
}

.book-content h3 {
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: 0.3rem;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.book-content .role {
    font-size: 0.9rem;
    color: var(--accent-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ==================== SPONSORS SECTION ==================== */
.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
    align-items: center;
    justify-items: center;
}

.sponsor-card {
    background: #ffffff !important; /* Replace with your hex code */
    /* Keep other properties as they are */
    backdrop-filter: blur(20px) saturate(180%);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    padding: 2rem;
}

.sponsor-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
    border-color: var(--accent-blue);
}

.sponsor-card img {
    max-width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: all 0.4s ease;
}

.sponsor-card:hover img {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

/* ==================== FOOTER FINAL (Aligné gauche - Style Image) ==================== */
footer {
    background: #000000; /* Fond noir strict ou var(--royal-blue) selon préférence */
    border-top: 1px solid rgba(59, 130, 246, 0.3);
    padding: 5rem 10% 2rem; /* Marges latérales plus grandes pour centrer le bloc global */
    margin-top: 5rem;
    color: var(--white);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start; /* Aligner les colonnes vers la gauche */
    gap: 15%; /* Grand espace vide entre "Contact" et "Follow Us" comme sur l'image */
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Tout aligner à GAUCHE */
    text-align: left; /* Texte aligné à GAUCHE */
}

.footer-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--white);
    letter-spacing: 1px;
}

.footer-line {
    width: 100%; /* La ligne prend toute la largeur de la colonne */
    max-width: 250px; /* Mais on la limite pour l'esthétique */
    height: 3px;
    background: var(--accent-blue); /* Couleur cyan/bleu */
    margin-bottom: 2rem;
    border-radius: 2px;
}

.footer-col p {
    color: var(--gray);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    max-width: 350px; /* Limite la largeur du paragraphe d'adresse */
}

.footer-col strong {
    color: var(--white);
    font-weight: 700;
}

.footer-email {
    color: var(--accent-blue); /* Couleur cyan */
    text-decoration: none;
    font-weight: 500;
    display: block; /* Force le retour à la ligne si besoin */
    margin-top: 0.2rem;
}

.social-icons-footer {
    display: flex;
    gap: 1rem;
    justify-content: flex-start; /* Icônes alignées à gauche */
}

.social-icons-footer a {
    color: var(--white);
    font-size: 1.2rem;
    border: 1px solid var(--white); /* Bordure fine blanche */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px; /* Carrés comme sur l'image, ou mettre 4px pour léger arrondi */
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icons-footer a:hover {
    background: var(--white);
    color: #000;
}

.footer-copyright {
    text-align: center; /* Seul le copyright reste centré en bas */
    margin-top: 5rem;
    padding-top: 2rem;
    font-size: 0.9rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Responsive : Sur mobile, on empile les colonnes */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 3rem;
    }
    
    .footer-line {
        width: 100px; /* Plus court sur mobile */
    }
}

/* ==================== CUSTOM SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(13, 11, 86, 0.1);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
    .navbar {
        padding: 1rem 3%;
    }

    section {
        padding: 4rem 3%;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.98);
        flex-direction: column;
        padding: 2rem;
        gap: 1rem;
        border-top: 1px solid var(--glass-border);
    }

    .nav-menu.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .hero h1 {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }

    .hero h2 {
        font-size: 1rem;
    }

    .event-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    #presentation,
    #histoire {
        padding: 2rem;
    }

    .social-links {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .sponsors-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 2rem;
    }

    section {
        padding: 3rem 5%;
    }

    .page-header {
        padding: 120px 5% 60px;
    }
}

@media (max-width: 480px) {
    .logo img {
        height: 40px;
    }

    .btn-main {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }

    .hero {
        padding: 1rem;
    }

    .book {
        width: 250px;
        height: 340px;
    }

    .event-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== ANIMATIONS SUPPLÉMENTAIRES ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out;
}

/* ==================== UTILITIES ==================== */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --royal-blue: #0d0b56;
            --light-blue: #1e3a8a;
            --accent-blue: #3b82f6;
            --black: #000000;
            --white: #ffffff;
            --gray: #e5e7eb;
            --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(59, 130, 246, 0.3);
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, var(--black) 0%, var(--royal-blue) 100%);
            color: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
            scroll-behavior: smooth;
            min-height: 100vh;
        }

        /* Particules d'arrière-plan */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--accent-blue);
            border-radius: 50%;
            animation: float-particles 20s infinite linear;
            opacity: 0.6;
        }

        @keyframes float-particles {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 0.6; }
            90% { opacity: 0.6; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }

        /* Navigation */
        header {
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid var(--glass-border);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 5%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .logo a {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .logo img {
            height: 90px;
            width: auto;
            transition: transform 0.3s ease, filter 0.3s ease;
            filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
        }

        .logo:hover img {
            transform: scale(1.05);
            filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.8));
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 0.5rem;
        }

        .nav-menu a {
            color: var(--gray);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            position: relative;
            backdrop-filter: blur(10px);
        }

        .nav-menu a::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50px;
            padding: 1px;
            background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .nav-menu a:hover {
            color: var(--white);
            background: var(--glass-bg);
            transform: translateY(-2px);
        }

        .nav-menu a:hover::before {
            opacity: 1;
        }

        .btn-main {
            padding: 0.9rem 2rem;
            background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
            color: var(--white);
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.4s ease;
            border: 2px solid transparent;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
            display: inline-block;
            cursor: pointer;
        }

        .btn-main:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
            border-color: var(--accent-blue);
        }

        .hamburger {
            display: none;
            font-size: 1.8rem;
            cursor: pointer;
            color: var(--white);
        }

        /* Hero Section */
        .hero {
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 2rem;
            background: radial-gradient(ellipse at center, var(--royal-blue) 0%, var(--black) 70%);
        }

        .hero::before {
            content: '';
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            top: -250px;
            right: -250px;
            animation: pulse 8s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }

        .hero-content {
            text-align: center;
            z-index: 2;
            max-width: 800px;
            margin-top: 80px;
        }
        .hero-logo {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.hero-logo img {
    width: 600px;        /* Desktop size */
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
}

        .hero h1 {
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 900;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--white) 0%, var(--accent-blue) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 3px;
        }

        .hero h2 {
            font-size: clamp(1rem, 2vw, 1.3rem);
            font-weight: 300;
            margin-bottom: 2rem;
            color: var(--gray);
            line-height: 1.6;
        }

        /* Contact Section */
        main {
            position: relative;
            z-index: 1;
            padding-bottom: 5rem;
        }

        #contact {
            padding: 5rem 5%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-title {
            font-size: clamp(2rem, 4vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 3rem;
            text-align: center;
            background: linear-gradient(135deg, var(--white), var(--accent-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
            padding-bottom: 1rem;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
        }

        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            margin-top: 3rem;
        }

        .contact-form {
            background: rgba(13, 11, 86, 0.3);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-radius: 25px;
            padding: 3rem;
            border: 1px solid var(--glass-border);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--gray);
            font-weight: 500;
            font-size: 0.95rem;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            color: var(--white);
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.1s ease;
            outline: none;
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--accent-blue);
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
        }

        .contact-form input::placeholder,
        .contact-form textarea::placeholder {
            color: rgba(229, 231, 235, 0.5);
        }

        .contact-form textarea {
            min-height: 150px;
            resize: vertical;
        }

        .contact-form button {
            width: 100%;
            padding: 1.2rem;
            border: none;
            font-size: 1rem;
            margin-top: 1rem;
        }

        /* Contact Info */
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .info-card {
            background: rgba(13, 11, 86, 0.3);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-radius: 20px;
            padding: 2rem;
            border: 1px solid var(--glass-border);
            transition: all 0.4s ease;
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
        }

        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
            border-color: var(--accent-blue);
        }

        .info-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .info-content h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: var(--white);
        }

        .info-content p {
            color: var(--gray);
            font-size: 1rem;
            line-height: 1.6;
        }

        .info-content a {
            color: var(--accent-blue);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .info-content a:hover {
            color: var(--white);
        }

        /* Map Container */
        .map-container {
            margin-top: 4rem;
            background: rgba(13, 11, 86, 0.3);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-radius: 25px;
            padding: 2rem;
            border: 1px solid var(--glass-border);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        }

        .map-container h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            text-align: center;
            background: linear-gradient(135deg, var(--white), var(--accent-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .map-placeholder {
            width: 100%;
            height: 400px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--glass-border);
        }

        /* Footer */
        footer {
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(20px);
            padding: 3rem 5%;
            border-top: 1px solid var(--glass-border);
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            text-align: center;
        }

        .social-links {
            display: flex;
            gap: 2rem;
            justify-content: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .social-links a {
            color: var(--white);
            text-decoration: none;
            font-size: 1rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            border: 1px solid var(--glass-border);
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            font-weight: 500;
        }

        .social-links a:hover {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
        }

        footer p {
            color: var(--gray);
            font-size: 0.9rem;
        }

        /* Success Message */
        .success-message {
            display: none;
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
            border: 1px solid rgba(34, 197, 94, 0.5);
            color: #86efac;
            padding: 1rem;
            border-radius: 15px;
            margin-bottom: 1rem;
            text-align: center;
        }

        .success-message.show {
            display: block;
            animation: slideIn 0.5s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive */
        @media (max-width: 968px) {
            .contact-container {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }

            .hamburger {
                display: block;
            }

            .hero {
                min-height: 50vh;
            }

            .contact-form,
            .map-container {
                padding: 2rem;
            }

            .info-card {
                padding: 1.5rem;
            }
        }

/* ==================== DROPDOWN MENU (Mise à jour Nav) ==================== */
.navbar { overflow: visible; } /* Important pour laisser dépasser le menu */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.95);
    min-width: 200px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 2000;
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    top: 100%;
    left: 0;
    backdrop-filter: blur(20px);
    padding: 1rem 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-content a {
    color: var(--gray);
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    border-radius: 0;
    background: transparent;
    border: none;
}

.dropdown-content a:hover {
    background: var(--glass-bg);
    color: var(--accent-blue);
    transform: translateX(5px);
}

/* ==================== FAQ ACCORDION ==================== */

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Quand une question est ouverte */
.accordion-item.active {
    background: rgba(59, 130, 246, 0.1); /* Fond bleu léger */
    border-color: var(--accent-blue);
}

.accordion-header {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--white);
    transition: background 0.3s ease;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.accordion-icon {
    transition: transform 0.3s ease;
    color: var(--accent-blue);
}

/* Rotation de la flèche quand ouvert */
.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0; /* Caché par défaut */
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
    background: rgba(0, 0, 0, 0.2);
}

.accordion-content p {
    padding: 1.5rem;
    color: var(--gray);
    margin: 0;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==================== SECTION PRÉSENTATION (Style Image) ==================== */
#presentation-section {
    padding: 6rem 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.presentation-block {
    display: flex;
    align-items: center;
    gap: 4rem; /* Espace entre texte et image */
    margin-bottom: 4rem;
}

/* Pour inverser l'ordre (Vidéo à gauche) */
.presentation-block.reverse {
    flex-direction: row-reverse; 
    /* Si vous préférez la vidéo à gauche, enlevez ".reverse" et mettez le HTML dans l'ordre voulu.
       Ici "row-reverse" mettra le 2ème élément HTML (texte) à gauche et le 1er (vidéo) à droite.
       Pour Vidéo Gauche / Texte Droite : gardez le HTML dans l'ordre Vidéo puis Texte, et supprimez la classe "reverse".
       CORRECTION : Pour avoir Vidéo Gauche + Texte Droite sans prise de tête :
       Gardez flex-direction: row; par défaut.
    */
    flex-direction: row; 
}

.text-content {
    flex: 1;
}

.visual-content {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* TITRE ORANGE (Style Image fournie) */
.presentation-title {
    font-size: 2rem;
    font-weight: 800;
    color: #ca7a44; /* Couleur Orange/Marron de l'image */
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

/* Optionnel : petite ligne sous le titre */
.presentation-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #ca7a44;
    margin-top: 10px;
}

.text-content p {
    color: var(--gray);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: justify; /* Pour un bloc texte propre comme sur l'image */
}

.text-content strong {
    color: var(--white);
    font-weight: 600;
}

/* IMAGES & VIDÉOS STYLISÉES */
.image-wrapper, .video-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Grosse ombre pour le relief */
    border: 1px solid var(--glass-border);
    max-width: 600px;
    width: 100%;
}

.image-wrapper img, .video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.image-wrapper:hover img {
    transform: scale(1.03); /* Zoom léger au survol */
}

/* Séparateur entre les deux blocs */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin: 4rem 0;
    opacity: 0.5;
}

/* RESPONSIVE (Mobile) */
@media (max-width: 968px) {
    .presentation-block, .presentation-block.reverse {
        flex-direction: column; /* Empile le texte et l'image */
        gap: 2rem;
        text-align: center;
    }

    .text-content p {
        text-align: left; /* Ou center selon préférence */
    }
    
    .presentation-title::after {
        margin: 10px auto 0; /* Centre la ligne sous le titre */
    }
}

/* ==================== PARTENAIRES INFINIS (CORRIGÉ) ==================== */
#partners-section {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden; /* Important pour ne pas voir ce qui dépasse */
}

.support-category {
    margin-bottom: 3rem;
}

.category-title {
    text-align: center;
    font-size: 1.2rem;
    color: var(--gray);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1rem 0;
    background: rgba(247, 244, 244, 0.02);
}

/* Masques dégradés sur les côtés (Optionnel, pour le style) */
.slider-container::before, .slider-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.slider-container::before { left: 0; background: linear-gradient(to right, #000, transparent); }
.slider-container::after { right: 0; background: linear-gradient(to left, #000, transparent); }

/* --- PISTE DU SLIDER --- */
.slider-track {
    display: flex;
    width: max-content; 
    
    /* CORRECTION MAJEURE : On enlève le gap et le padding ici */
    gap: 0; 
    padding-right: 0;
    
    /* L'animation */
    animation: scrollLeft 10s linear infinite;
}

/* Version inversée (Sponsors) */
.slider-track.reverse-track {
    animation: scrollRight 10s linear infinite;
}

.slider-track:hover {
    animation-play-state: paused;
}

/* ==================== SECTION PARTENAIRES (CORRIGÉE) ==================== */

#partners-section {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3); /* Fond sombre pour la section */
    border-top: 1px solid var(--glass-border);
    overflow: hidden; /* Important : Cache ce qui dépasse de l'écran */
}

.support-category {
    margin-bottom: 3rem;
}

.category-title {
    text-align: center;
    font-size: 1.2rem;
    color: var(--gray);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* --- LE CONTENEUR PRINCIPAL --- */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Le masque qui cache les côtés */
    padding: 1rem 0;
    /* Optionnel : Dégradés sur les côtés pour l'effet fondu */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* --- LA BANDE QUI BOUGE (TRACK) --- */
.slider-track {
    display: flex;
    width: max-content; /* La largeur s'adapte au contenu */
    gap: 0; /* On gère l'espace avec les marges des slides */
    
    /* L'ANIMATION CRUCIALE */
    animation: scrollLeft 40s linear infinite;
}

/* Version inversée pour la 2ème ligne (si utilisée) */
.slider-track.reverse-track {
    animation: scrollRight 40s linear infinite;
}

/* Pause au survol de la souris */
.slider-track:hover {
    animation-play-state: paused;
}

/* --- LE STYLE CARRÉ (SLIDE) --- */
/* Change the color of the square behind each partner logo */
/* 1. Target the square behind the logo in its normal state */
/* 1. Target the square behind each logo */
/* 1. This creates the square background in its normal state */
.slide {
    background-color: #ffffff !important; /* FORCE always visible */
    padding: 1rem;
    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 180px;
    height: 120px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* 2. This ensures the logo image fits perfectly inside the square */
.slide img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}


/* 3. This handles the hover state if you want it to change color */
.slide:hover {
    background: var(--white); /* Changes to the blue defined in your :root */
    transform: translateY(-5px);    /* Optional: slight lift effect */
}

/* Le logo reprend ses couleurs au survol */
.slide:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

/* --- LES ANIMATIONS (KEYFRAMES) --- */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ==================== SECTION STATISTIQUES (PYRAMIDE) ==================== */
#statistics-section {
    padding: 3rem 2%;
    position: relative;
    /* Fond dégradé subtil pour détacher la section */
    background: linear-gradient(to bottom, transparent, rgba(13, 11, 86, 0.4));
}

/* --- STRUCTURE PYRAMIDALE --- */

/* 1. Zone du Haut (Titre "1st MUN") */
.stats-top {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem; /* Espace aéré avant la ligne du bas */
    width: 100%;
}

/* 2. Zone du Bas (Ligne horizontale des 6 autres) */
.stats-bottom {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Hauteur uniforme */
    gap: 1.5rem;
    max-width: 100%;
    margin: 0 auto;
    flex-wrap: wrap; /* Sécurité pour passer à la ligne sur mobile */
}

/* Force l'alignement en ligne sur grand écran */
@media (min-width: 1200px) {
    .stats-bottom {
        flex-wrap: nowrap;
    }
}

/* --- DESIGN DES CARTES (PREMIUM) --- */
.stat-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem 0.5rem;
    
    /* Flexibilité pour la ligne du bas */
    flex: 1; 
    min-width: 140px; 
    max-width: 220px;
    
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-blue);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.3), inset 0 0 20px rgba(59, 130, 246, 0.1);
}

/* --- CARTE SPECIALE "1st MUN" (Sommet) --- */
.stat-card.special-card {
    /* Plus grande pour dominer */
    min-width: 240px;
    transform: scale(1.1); 
    border-color: rgba(202, 122, 68, 0.5); /* Bordure Orange */
    z-index: 5;
}

.stat-card.special-card:hover {
    transform: scale(1.15) translateY(-5px);
    border-color: #ca7a44;
    box-shadow: 0 20px 50px rgba(202, 122, 68, 0.3), inset 0 0 20px rgba(202, 122, 68, 0.1);
}

/* --- TYPOGRAPHIE & DÉTAILS --- */
.stat-icon {
    font-size: 2rem;
    color: var(--accent-blue);
    margin-bottom: 0.8rem;
    /* Animation de pulsation infinie */
    animation: iconPulse 3s infinite ease-in-out;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--white);
    
    /* Dégradé Bleu */
    background: linear-gradient(135deg, var(--white), var(--accent-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.plus-sign, .ordinal {
    font-size: 1.4rem;
    color: var(--accent-blue);
    font-weight: 700;
    vertical-align: top;
    margin-left: 2px;
}

.stat-label {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* --- COULEURS ORANGE (Pour la Special Card) --- */
.stat-card.special-card .stat-icon { 
    color: #ca7a44; 
    animation: iconPulseOrange 3s infinite ease-in-out; 
}

.stat-card.special-card .stat-number { 
    background: linear-gradient(135deg, #fff, #ca7a44); 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent;
}

.stat-card.special-card .ordinal { 
    color: #ca7a44; 
}

/* --- ANIMATIONS --- */
@keyframes iconPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; filter: drop-shadow(0 0 0px rgba(59,130,246,0)); }
    50% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 10px rgba(59,130,246,0.5)); }
}

@keyframes iconPulseOrange {
    0%, 100% { transform: scale(1); opacity: 0.8; filter: drop-shadow(0 0 0px rgba(202,122,68,0)); }
    50% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 10px rgba(202,122,68,0.5)); }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .stats-bottom {
        flex-wrap: wrap; /* Revient à la ligne sur mobile */
        gap: 1rem;
    }
    
    .stat-card {
        min-width: 45%; /* 2 cartes par ligne */
        padding: 1rem;
    }

    .stat-card.special-card {
        transform: scale(1); /* Taille normale sur mobile */
        width: 80%; /* Prend plus de place */
    }
}

/* ==================== TEAM HORIZONTAL SCROLL (Style Image) ==================== */

.team-scroll-container {
    display: flex;
    overflow-x: auto; /* Active le défilement horizontal */
    gap: 2rem;
    padding: 2rem 1rem 3rem 1rem; /* Espace pour l'ombre et la scrollbar */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Fluidité sur mobile */
    justify-content: flex-start; 
}

/* Personnalisation de la Scrollbar horizontale */
.team-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.team-scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.team-scroll-container::-webkit-scrollbar-thumb {
    background: var(--accent-blue);
    border-radius: 10px;
}

/* --- DESIGN DE LA CARTE MEMBRE --- */
.team-member-card {
    flex: 0 0 280px; /* Largeur fixe */
    height: 400px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    
    /* Bordure Bleue Néon comme sur l'image */
    border: 2px solid var(--accent-blue);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(13,11,86,0.8) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(59, 130, 246, 0.2);
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4), inset 0 0 30px rgba(59, 130, 246, 0.4);
}

/* Badge "ENSA MUN" en haut à gauche */
.card-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1;
    color: var(--white);
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.card-badge span {
    color: var(--accent-blue);
    font-size: 0.9rem;
}
.card-badge::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--accent-blue);
    border-radius: 2px;
}

/* Photo du membre */
.member-photo {
    width: 100%;
    height: 100%;
}
.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;
}
.team-member-card:hover .member-photo img {
    transform: scale(1.05);
}

/* Infos (Nom & Rôle) en bas */
.member-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, transparent 100%);
    z-index: 5;
}

.member-info h3 {
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,1);
}

.member-info p {
    color: var(--gray);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==================== TEAM SPLIT AVEC STYLE "BOOK" (NÉON) ==================== */

.team-split-container {
    display: flex;
    align-items: center; /* Aligne verticalement au centre */
    gap: 3rem; /* Espace entre le directeur et l'équipe */
    width: 100%;
    position: relative;
    padding: 1rem 0 2rem 0; /* Marge pour l'ombre des cartes */
}

/* 1. ZONE FIXE (GAUCHE) */
.team-fixed-zone {
    flex-shrink: 0;
    width: 280px; /* Largeur exacte d'une carte .book */
    position: relative;
    z-index: 10; /* Reste au-dessus */
}

/* Petite flèche néon pour lier le directeur à son équipe */
.team-fixed-zone::after {
    content: '';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid var(--accent-blue);
    filter: drop-shadow(0 0 10px var(--accent-blue));
    opacity: 0.8;
}

/* 2. ZONE DÉFILANTE (DROITE) */
.team-scroll-zone {
    display: flex;
    overflow-x: auto; /* Active le scroll horizontal */
    gap: 2rem; /* Espace entre les membres */
    padding: 1rem; /* Espace interne pour ne pas couper les ombres */
    flex-grow: 1;
    scroll-behavior: smooth;
    
    /* Effet de fondu sur le bord droit */
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

/* Scrollbar personnalisée */
.team-scroll-zone::-webkit-scrollbar { height: 6px; }
.team-scroll-zone::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
.team-scroll-zone::-webkit-scrollbar-thumb { background: var(--accent-blue); border-radius: 10px; }

/* --- ADAPTATION DES CARTES .book DANS LE SCROLL --- */
/* C'est la partie importante : on force la carte à garder sa taille */
.team-scroll-zone .book {
    flex: 0 0 280px; /* Ne jamais rétrécir en dessous de 280px */
    width: 280px;
    margin: 0; /* Reset des marges auto */
}

/* RESPONSIVE MOBILE */
@media (max-width: 900px) {
    .team-split-container {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .team-fixed-zone::after { display: none; } /* Cache la flèche */
    .team-scroll-zone {
        width: 100%;
        padding-left: 1rem;
        mask-image: none;
    }
}

/* ==================== GALERIE PHOTOS (EVENTS) ==================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.gallery-item {
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    height: 250px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.gallery-item:hover img {
    transform: scale(1.1);
}

/* Style spécial pour la vidéo (prend 2 colonnes sur grand écran) */
.video-item {
    grid-column: span 2; /* Prend la largeur de 2 images */
    border: 2px solid var(--accent-blue);
}

.gallery-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 1; /* Toujours visible pour la vidéo */
    transition: background 0.3s;
}

.gallery-overlay i {
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px var(--accent-blue);
}

.video-item:hover .gallery-overlay {
    background: rgba(0,0,0,0.2); /* S'éclaircit au survol */
}

@media (max-width: 768px) {
    .video-item {
        grid-column: span 1; /* Sur mobile, redevient normal */
    }
}

/* ==================== AMÉLIORATION 1 : GALERIE INTERACTIVE ==================== */
.gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 280px; /* Un peu plus haut */
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* L'image prend tout l'espace */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Overlay sombre qui apparaît au survol */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,11,86,0.9), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Texte par défaut caché */
.gallery-caption {
    position: absolute;
    bottom: -50px; /* Caché en bas */
    left: 20px;
    right: 20px;
    z-index: 5;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-caption h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 700;
}

/* EFFET HOVER */
.gallery-item:hover img {
    transform: scale(1.15);
}
.gallery-item:hover::after {
    opacity: 1;
}
.gallery-item:hover .gallery-caption {
    bottom: 20px; /* Le texte remonte */
}

/* Cas spécial Vidéo */
.video-item .gallery-overlay {
    background: rgba(0,0,0,0.3); /* Toujours un peu sombre */
}
.video-item:hover .gallery-overlay {
    background: rgba(0,0,0,0.1); /* S'éclaircit pour inciter au clic */
    backdrop-filter: blur(0px);
}
.video-item i {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.video-item:hover i {
    transform: scale(1.3);
    color: #ca7a44; /* Touche Orange au survol */
}

/* ==================== AMÉLIORATION 2 : COMITÉS (Cartes Glass) ==================== */
/* Ne pas utiliser sponsor-card ici, on crée une classe dédiée */
.committee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.committee-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 4px solid var(--accent-blue); /* Ligne bleue à gauche */
    border-radius: 15px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.committee-card i {
    font-size: 2.5rem;
    color: var(--accent-blue);
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(59,130,246,0.4));
    transition: transform 0.4s ease;
}

.committee-card p {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.committee-card:hover {
    transform: translateY(-5px);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.committee-card:hover i {
    transform: scale(1.2) rotate(10deg);
    color: var(--white);
}

/* ==================== AMÉLIORATION 3 : ACTIVITÉS (Néon) ==================== */
/* On garde .event-card mais on l'améliore pour cette section */
.activities-grid .event-card {
    text-align: center;
    padding: 3rem 2rem;
    background: radial-gradient(circle at top right, rgba(30, 58, 138, 0.2), rgba(0,0,0,0.4));
    border: 1px solid rgba(255,255,255,0.05);
}

.date-badge {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    border: 2px solid rgba(255,255,255,0.2);
}

.activities-grid .event-card:hover .date-badge {
    transform: scale(1.1) rotate(360deg);
    transition: transform 0.6s ease;
}

/* ==================== EVENTS 2026 : THÈME & AGENDA ==================== */

/* --- 1. PRESENTATION DU THÈME --- */
.theme-box {
    background: radial-gradient(circle at center, rgba(30, 58, 138, 0.4), rgba(0,0,0,0.6));
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 4rem;
    box-shadow: 0 0 50px rgba(13, 11, 86, 0.5);
}

.main-theme-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 2rem;
    color: var(--white);
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.main-theme-title .highlight {
    color: var(--accent-blue);
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}

.theme-description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
    color: var(--gray);
    position: relative;
    z-index: 2;
}

.theme-icon {
    font-size: 10rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.03);
    z-index: 1;
    pointer-events: none;
}

/* --- 2. AGENDA / PLANNING --- */
.agenda-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.agenda-day {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.agenda-day:hover {
    transform: translateY(-5px);
    border-color: var(--accent-blue);
}

/* Mise en avant du jour principal (optionnel) */
.agenda-day.active-day {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(0,0,0,0) 100%);
    border-color: var(--accent-blue);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
}

.day-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.day-header h3 {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.day-header .date {
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 0.9rem;
}

.schedule-list {
    list-style: none;
    padding: 1.5rem;
}

.schedule-list li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    color: var(--gray);
    font-size: 0.95rem;
}

.schedule-list li:last-child {
    border-bottom: none;
}

.schedule-list .time {
    font-weight: 700;
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 5px;
    margin-right: 15px;
    min-width: 60px;
    text-align: center;
    font-size: 0.85rem;
}

/* --- BOUTON TÉLÉCHARGEMENT --- */
.download-btn {
    font-size: 1.1rem;
    padding: 1rem 3rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.download-btn i {
    font-size: 1.4rem;
}

/* ==================== TRADUCTION : BULLE FLOTTANTE (FINAL) ==================== */

/* 1. SUPPRESSION BARRE DU HAUT & DÉCALAGES */
.goog-te-banner-frame { display: none !important; }
body { top: 0px !important; position: static !important; }

/* 2. LE CONTENEUR (CERCLE GLACE FLOTTANT) */
.floating-lang-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    
    /* Forme & Taille */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    /* Design Glassmorphism */
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    
    /* Centrage */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Animation */
    animation: floatBubble 4s ease-in-out infinite;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* L'Animation de flottement */
@keyframes floatBubble {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Effet au survol */
.floating-lang-container:hover {
    animation-play-state: paused;
    transform: scale(1.1);
    background: rgba(59, 130, 246, 0.6); /* Bleu plus visible */
    border-color: #fff;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
}

/* 3. LE BOUTON GOOGLE (TEXTE CACHÉ) */
.goog-te-gadget-simple {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* ASTUCE : On cache le texte "Select Language" en mettant la police à 0 */
    font-size: 0 !important; 
}

/* On cache tous les éléments internes de Google */
.goog-te-gadget-simple span,
.goog-te-menu-value,
.goog-te-gadget-icon {
    display: none !important;
}

/* 4. NOTRE LOGO PERSONNALISÉ (IMAGE) */
.goog-te-gadget-simple::before {
    content: ''; /* On enlève le code du globe */
    display: block;
    width: 40px;  /* Ajustez la taille selon votre image */
    height: 40px;
    
    /* Mettez le chemin de votre image ici */
    background-image: url('tr icon.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Si votre image est noire et que vous la voulez blanche (optionnel) */
    /* filter: brightness(0) invert(1); */
}

/* 5. FONDS DU MENU DÉROULANT (MODE SOMBRE) */
.goog-te-menu-frame {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    border-radius: 15px !important;
    filter: invert(0.95) hue-rotate(180deg) !important; /* Rend le menu noir */
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .floating-lang-container {
        bottom: 20px; right: 20px;
        width: 50px; height: 50px;
    }
    .goog-te-gadget-simple::before { font-size: 20px !important; }
}

/* ==================== MENU DÉROULANT : BLEND & DARK MODE ==================== */

/* On cible la "fenêtre" (iframe) du menu Google */
.goog-te-menu-frame {
    /* 1. L'ASTUCE MAGIQUE : Inversion des couleurs */
    /* invert(0.95) : Transforme le Blanc en Noir Profond (presque 100%) */
    /* hue-rotate(180deg) : Corrige les couleurs (le bleu inversé deviendrait orange, on le remet en bleu) */
    filter: invert(0.95) hue-rotate(180deg) brightness(1.1) !important;
    
    /* 2. FORME & OMBRE */
    /* Une ombre portée cyan/bleue pour l'effet "Néon" qui matche votre site */
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6) !important;
    
    border-radius: 15px !important; /* Coins arrondis */
    border: none !important; /* Enlève la bordure grise moche */
    
    /* 3. POSITIONNEMENT */
    margin-bottom: 15px !important; /* Laisse un peu d'espace avec la bulle */
    opacity: 0.95 !important; /* Légère transparence globale */
}

/* Optionnel : Si une ombre interne apparaît, on la supprime */
.goog-te-menu2 {
    background: transparent !important;
    border: none !important;
}

/* ==================== GOOGLE MAPS ==================== */
.map-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 25px; /* Même arrondi que le conteneur */
    display: block;
}

/* Optionnel : Supprimer le padding du conteneur map pour que la carte touche les bords */
.map-container {
    padding: 0 !important; 
    overflow: hidden; /* Important pour que la carte ne dépasse pas des bords arrondis */
}

/* ==================== PAGE CONTACT "DEEP BLUE" ==================== */

/* 1. LAYOUT GÉNÉRAL */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Le formulaire est un peu plus large */
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: flex-start;
}

/* 2. LE FORMULAIRE (GAUCHE) */
.contact-form-card {
    background: #060530; /* Bleu très foncé presque noir */
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 25px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.contact-form-card label {
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: block;
}

.contact-form-card input,
.contact-form-card textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05); /* Champ très sombre */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    color: white;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.contact-form-card textarea {
    min-height: 150px;
    resize: none;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6; /* Bleu électrique au focus */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.btn-submit {
    width: 100%;
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1rem;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
    transition: transform 0.2s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.4);
}

/* 3. COLONNE DROITE (INFO BOXES) */
.contact-info-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espace entre les 3 cartes */
}

.info-box {
    background: #0a0940; /* Bleu nuit légèrement plus clair que le formulaire */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    transition: transform 0.3s ease;
}

.info-box:hover {
    transform: translateX(5px);
    border-color: #3b82f6;
    background: #0f0e50;
}

/* L'ICÔNE CARRÉE DÉGRADÉE */
.icon-box {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6, #1e40af); /* Dégradé Bleu */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

.icon-box i {
    color: white;
    font-size: 1.2rem;
}

/* TEXTES DANS LES CARTES */
.info-text h3 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

.info-text p, .info-text a {
    color: #9ca3af; /* Gris clair */
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
    text-decoration: none;
    display: block;
}

.info-text a {
    color: #3b82f6; /* Email en bleu */
    font-weight: 600;
}

/* 4. CARTE MAPS (FULL WIDTH EN BAS) */
.map-section-full {
    width: 100%;
    height: 350px;
    border-radius: 25px;
    overflow: hidden;
    margin-top: 1rem;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .contact-wrapper {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
}

/* ==================== CARTE MAPS (VERSION COLONNE) ==================== */
.map-mini-card {
    width: 100%;
    height: 250px; /* Hauteur ajustée pour équilibrer la colonne */
    border-radius: 20px; /* Même arrondi que les info-box */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin-top: 0.5rem; /* Petit espace avec la carte adresse */
    transition: transform 0.3s ease;
}

.map-mini-card:hover {
    transform: translateY(-5px);
    border-color: #3b82f6;
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.2);
}

/* S'assurer que le wrapper gère bien les hauteurs */
.contact-wrapper {
    align-items: stretch; /* Étire les colonnes pour un alignement propre */
}

/* ==================== GALERIE 3D : COMPACTE & RAFFINÉE ==================== */

/* 1. ON AJUSTE LA HAUTEUR ET L'ESPACE */
.wrapper-3d {
    width: 100%;
    height: 500px;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
    overflow: hidden; 
    perspective: 1000px;
}

.inner-3d {
    /* --- DIMENSIONS RÉDUITES --- */
    --w: 100px;  /* Largeur (avant 120px) */
    --h: 150px;  /* Hauteur (avant 180px) */
    
    /* Écartement recalculé pour cette taille */
    --translateZ: calc((var(--w) + var(--h)) + 30px); 
    
    /* On garde l'alignement vertical demandé */
    --rotateX: -10deg; 
    
    --perspective: 1000px;

    position: absolute;
    width: var(--w);
    height: var(--h);
    
    /* Centré */
    top: 25%; 
    left: calc(50% - (var(--w) / 2));
    
    z-index: 2;
    transform-style: preserve-3d;
    transform: perspective(var(--perspective));
    animation: rotating 35s linear infinite;
}

@keyframes rotating {
    from {
        transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0deg);
    }
    to {
        transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(360deg);
    }
}

/* 3. DESIGN DES CARTES (Style Verre Fumé plus subtil) */
.card-3d {
    position: absolute;
    inset: 0;
    
    /* Fond sombre et flou */
    background: rgba(0, 0, 0, 0.8); 
    backdrop-filter: blur(5px);
    border-radius: 12px;
    
    /* Bordure très fine et discrète au repos */
    border: 1px solid rgba(var(--color-card), 0.3);
    
    /* Effet Miroir plus court pour ne pas encombrer */
    -webkit-box-reflect: below 3px linear-gradient(transparent 50%, rgba(0,0,0,0.2));
    
    overflow: hidden;
    
    /* Positionnement 3D */
    transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- EFFET AU SURVOL (HOVER) --- */
.card-3d:hover {
    /* La bordure s'allume franchement */
    border-color: rgba(var(--color-card), 1);
    
    /* Halo lumineux */
    box-shadow: 0 0 25px rgba(var(--color-card), 0.5);
    
    z-index: 100;
    cursor: pointer;
    /* Zoom léger */
    transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ)) scale(1.1);
}

/* 4. GESTION DES IMAGES */
.img-3d {
    width: 100%;
    height: 100%;
    position: relative;
}

.img-3d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: none;
    
    /* Plus sombre au repos pour faire ressortir celle survolée */
    opacity: 0.7;
    filter: grayscale(30%); /* Légèrement décoloré au repos */
    transition: all 0.5s ease;
    border-radius: 12px;
}

/* L'image s'éclaire, se recolore et zoome au survol */
.card-3d:hover .img-3d img {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* RESPONSIVE MOBILE (Encore plus petit sur téléphone) */
@media (max-width: 768px) {
    .wrapper-3d {
        height: 400px;
        margin-top: 1rem;
    }
    .inner-3d {
        --w: 90px; 
        --h: 135px;
        --translateZ: calc((var(--w) + var(--h)) + 20px);
    }
}

/* ==================== LOGO SUR LES CARTES MEMBRES (TAILLE AUGMENTÉE) ==================== */
.card-logo-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    
    /* MODIFICATION ICI : On augmente la taille */
    width: 80px; /* Avant : 50px */
    height: auto;
    
    z-index: 10;
    
    /* Ombre pour le détacher du fond sombre */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
    
    transition: transform 0.3s ease;
}

/* On garde l'effet au survol */
.book:hover .card-logo-badge,
.team-member-card:hover .card-logo-badge {
    transform: scale(1.1) rotate(-5deg);
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8));
}

/* ==================== PAGE À PROPOS (ABOUT MUN) ==================== */

/* 1. SECTION PRÉSENTATION (Texte + Image) */
#presentation-section {
    padding: 4rem 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.presentation-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem; /* Espace entre le texte et l'image */
    margin-bottom: 4rem;
}

/* Version inversée (Image à gauche, Texte à droite) */
.presentation-block.reverse {
    flex-direction: row-reverse;
}

.text-content {
    flex: 1; /* Prend la moitié de l'espace */
}

.visual-content {
    flex: 1; /* Prend l'autre moitié */
    display: flex;
    justify-content: center;
}

.presentation-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

/* Petite ligne bleue sous le titre */
.presentation-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--accent-blue);
    margin-top: 10px;
    border-radius: 2px;
}

.text-content p {
    color: var(--gray);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* Style de l'image (Cadre néon) */
.image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid var(--glass-border);
    max-width: 100%;
    transition: transform 0.3s ease;
}

.image-wrapper:hover {
    transform: translateY(-10px);
    border-color: var(--accent-blue);
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 2. BOÎTE CONCEPT (THEME BOX) */
.theme-box {
    background: radial-gradient(circle at center, rgba(30, 58, 138, 0.3), rgba(0,0,0,0.4));
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    margin: 2rem auto 4rem;
    box-shadow: 0 0 40px rgba(13, 11, 86, 0.5);
    max-width: 900px;
    text-align: center;
}

.theme-icon {
    font-size: 15rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.03); /* Filigrane transparent */
    pointer-events: none;
    z-index: 0;
}

.theme-box .text-center {
    position: relative;
    z-index: 1;
}

.main-theme-title {
    color: var(--white);
    font-weight: 800;
    margin-bottom: 1rem;
}

.highlight {
    color: var(--accent-blue);
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.theme-description {
    color: var(--gray);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* 3. FAQ (ACCORDÉON) */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 4rem;
}

.accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item.active {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--accent-blue);
}

.accordion-header {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--white);
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.accordion-icon {
    transition: transform 0.3s ease;
    color: var(--accent-blue);
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(0, 0, 0, 0.2);
}

.accordion-content p {
    padding: 1.5rem;
    color: var(--gray);
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 4. RESPONSIVE (MOBILE) */
@media (max-width: 900px) {
    .presentation-block,
    .presentation-block.reverse {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .presentation-title::after {
        margin: 10px auto 0;
    }

    .text-content p {
        text-align: center; /* ou left selon votre goût */
    }
    
    .theme-icon {
        font-size: 10rem;
    }
}

/* ==================== CORRECTION BACKGROUND (À METTRE À LA FIN) ==================== */
body {
    background: linear-gradient(135deg, #000000 0%, #0d0b56 100%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important; /* Le secret : le fond ne bouge pas */
    background-size: cover !important;
    min-height: 100vh;
}

/* ==================== CORRECTION COULEURS LOGOS ==================== */

/* 1. Remettre les couleurs dans les sliders (Partenaires & Médias) */
.slide img {
    filter: none !important; /* Enlève le noir et blanc */
    opacity: 1 !important;   /* Enlève la transparence */
}

/* 2. Remettre les couleurs dans les cartes sponsors */
.sponsor-card img {
    filter: none !important; /* Enlève l'effet blanc */
    opacity: 1 !important;
}

/* Optionnel : Si vous voulez garder un petit effet au survol */
.slide img:hover, .sponsor-card:hover img {
    transform: scale(1.1); /* Juste un petit zoom */
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)) !important; /* Lueur légère */
}

/* ==================== PAGE 2026 : NOUVEAUX STYLES ==================== */

/* 1. HERO 2026 */
/* 1. HERO 2026 (Mise à jour avec Image de Fond) */
.hero-2026 {
    padding: 8rem 5% 4rem;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;

    /* --- AJOUT DU BACKGROUND ICI --- */
    /* Remplacez 'Images/posters/votre-image-2026.jpg' par votre image */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(13, 11, 86, 0.9)), 
                url('about_mun.png'); 
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Effet fixe moderne */
}

.title-giant {
    font-size: 5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #fff 30%, var(--accent-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0.5rem 0;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
}

.subtitle-neon {
    color: var(--accent-blue);
    letter-spacing: 5px;
    font-weight: 700;
    text-transform: uppercase;
}

.date-neon {
    font-size: 1.5rem;
    color: var(--gray);
    margin-bottom: 2rem;
}

/* Countdown Amélioré */
.countdown-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
    margin-top: -80px;
}
.time-box {
    background: rgba(13, 11, 86, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 15px;
    padding: 1rem;
    min-width: 100px;
    backdrop-filter: blur(10px);
}
.time-val { font-size: 2.5rem; font-weight: 800; color: #fff; display: block; }
.time-label { color: var(--accent-blue); font-size: 0.8rem; text-transform: uppercase; }

/* Boutons */
.cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 0rem;
    z-index: 3;
}
.pulse-btn {
    animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.btn-outline {
    border: 2px solid var(--white);
    color: var(--white);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-outline:hover { background: var(--white); color: var(--black); }

/* 2. TIMELINE (AGENDA VERTICAL) */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 4rem auto;
    padding-left: 2rem;
    border-left: 2px solid rgba(255,255,255,0.1);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    padding-left: 2rem;
}

.timeline-dot {
    position: absolute;
    left: -2rem;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--black);
    border: 4px solid var(--accent-blue);
    border-radius: 50%;
    transform: translateX(-50%);
}

.timeline-date {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1rem;
}

.timeline-content {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.timeline-content ul {
    list-style: none;
    margin-top: 1rem;
}
.timeline-content li {
    margin-bottom: 0.8rem;
    color: var(--gray);
    display: flex;
}
.timeline-content li span {
    font-weight: 700;
    color: var(--accent-blue);
    min-width: 60px;
    margin-right: 10px;
}

.timeline-item.active .timeline-dot {
    background: var(--accent-blue);
    box-shadow: 0 0 15px var(--accent-blue);
}
.active-content {
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.05);
}

/* 3. FORMULAIRE GRID */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.full-width { grid-column: span 2; }

.glass-input {
    width: 100%;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    padding: 1rem;
    border-radius: 10px;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
}
.glass-input:focus {
    border-color: var(--accent-blue);
    background: rgba(0,0,0,0.4);
}
.glass-input option { color: black; }

/* Responsive */
@media (max-width: 768px) {
    .title-giant { font-size: 3.5rem; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .full-width { grid-column: span 1; }
    .timeline { padding-left: 1rem; }
}


/* ==========================================================================
   3. NAVIGATION (HEADER TRANSPARENT)
   ========================================================================== */
header {
    position: fixed; width: 100%; top: 0; z-index: 1000;
    /* Transparence Totale par défaut */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    padding-top: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* État au scroll (Géré par JS) : Fond Noir + Flou */
header.scrolled {
    background: rgba(0, 0, 0, 0.95) !important;
    padding-top: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 5%; max-width: 1400px; margin: 0 auto;
    overflow: visible;
}

/* Logo */
.logo img {
    height: 100px; width: auto;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
    transition: transform 0.3s ease;
}
.logo img:hover { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(59, 130, 246, 1)); }

/* Menu Links */
.nav-menu { display: flex; list-style: none; gap: 0.5rem; }
.nav-menu li { position: relative; }

.nav-menu a {
    color: rgba(255,255,255,0.8); text-decoration: none;
    font-size: 0.95rem; font-weight: 500;
    padding: 0.8rem 1.5rem; border-radius: 50px;
    transition: all 0.3s ease;
}

.nav-menu a:hover, .nav-menu a.active {
    color: var(--white);
    background: var(--glass-bg);
    box-shadow: 0 0 15px rgba(59,130,246,0.2);
}

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
    display: none; position: absolute;
    background: rgba(0, 0, 0, 0.95);
    min-width: 220px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 2000;
    border-radius: 15px; border: 1px solid var(--glass-border);
    top: 100%; left: 0; padding: 1rem 0;
    opacity: 0; transform: translateY(10px);
    transition: all 0.3s ease;
}
.dropdown:hover .dropdown-content { display: block; opacity: 1; transform: translateY(0); }
.dropdown-content a { display: block; border-radius: 0; padding: 10px 20px; }
.dropdown-content a:hover { background: var(--glass-bg); color: var(--accent-blue); }

/* Hamburger */
.hamburger { display: none; font-size: 1.8rem; cursor: pointer; color: var(--white); }

/* ==================== PAGE : HOW TO APPLY (TIMELINE CENTRALE) ==================== */
.steps-timeline {
    position: relative;
    max-width: 1000px;
    margin: 4rem auto;
}

/* La ligne centrale */
.steps-timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background: var(--glass-border);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.step-container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* Cercles sur la ligne */
.step-container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -13px;
    background-color: var(--black);
    border: 4px solid var(--accent-blue);
    top: 30px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 10px var(--accent-blue);
}

/* Gauche et Droite */
.left { left: 0; }
.right { left: 50%; }

.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 32px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent rgba(255,255,255,0.1);
}

.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 32px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent rgba(255,255,255,0.1) transparent transparent;
}

.right::after { left: -13px; }

/* Contenu de la carte */
.step-content {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    position: relative;
    transition: transform 0.3s ease;
    backdrop-filter: blur(10px);
}

.step-content:hover {
    transform: translateY(-5px);
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--accent-blue);
}

.step-number {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 10px;
    right: 20px;
}

/* RESPONSIVE MOBILE */
@media screen and (max-width: 768px) {
    .steps-timeline::after { left: 31px; }
    .step-container { width: 100%; padding-left: 70px; padding-right: 25px; }
    .step-container::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent rgba(255,255,255,0.1) transparent transparent; }
    .left::after, .right::after { left: 18px; }
    .right { left: 0%; }
}

/* ==================== STYLE REVUE DE PRESSE (CARTE VERTICALE) ==================== */

.press-grid {
    display: grid;
    /* Crée des colonnes automatiques : minimum 300px de large */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.press-card {
    background: rgba(13, 11, 86, 0.6); /* Fond bleu nuit transparent */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden; /* Coupe l'image dans les coins arrondis */
    text-decoration: none;
    display: flex;
    flex-direction: column; /* FORCE L'ALIGNEMENT VERTICAL (Image haut / Texte bas) */
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    height: 100%; /* Uniformise la hauteur de toutes les cartes */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Effet au survol global de la carte */
.press-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-blue);
    background: rgba(13, 11, 86, 0.9);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.3);
}

/* --- L'IMAGE (HAUT DE LA CARTE) --- */
.press-logo-img {
    width: 100%;
    height: 200px;      /* Vous pouvez augmenter à 220px ou 250px si vous voulez voir plus d'image */
    object-fit: cover;  /* Garde les proportions sans déformer */
    
    /* LA CORRECTION EST ICI : on aligne en haut au lieu du centre */
    object-position: top; 
    
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.5s ease;
}

.press-card:hover .press-logo-img {
    transform: scale(1.05); /* Zoom léger sur l'image */
}

/* --- LE CONTENU (BAS DE LA CARTE) --- */
.press-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;    /* Occupe tout l'espace restant vers le bas */
    justify-content: space-between; /* Pousse le lien "Lire" vers le bas */
}

.press-content h3 {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.5;
    
    /* Coupe le titre proprement s'il dépasse 3 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- LIEN "LIRE LA SUITE" --- */
.read-more {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--accent-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
}

.press-card:hover .read-more {
    gap: 12px; /* Écarte légèrement l'icône au survol */
}

.read-more i {
    transition: transform 0.3s ease;
}
.press-card:hover .read-more i {
    transform: translateX(3px);
}

/* ==================== FORCE 4 COLONNES POUR CHAIR BOARD ==================== */

/* 1. Sur ordinateur (Grand écran) : On force 4 colonnes */
#chair .team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Force 4 colonnes de largeur égale */
    gap: 2rem; /* Espace entre les cartes */
    justify-items: center;
    max-width: 1400px; /* Largeur max pour ne pas trop étirer */
    margin: 3rem auto;
}

/* 2. Adaptation Tablettes (Écrans moyens) */
/* Si l'écran est trop petit pour 4 cartes, on passe à 2 pour garder la lisibilité */
@media (max-width: 1200px) {
    #chair .team-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* 3. Adaptation Mobile (Téléphones) */
/* Sur téléphone, on passe à 1 seule carte par ligne */
@media (max-width: 768px) {
    #chair .team-grid {
        grid-template-columns: 1fr; 
    }
}
/* ==================== SECTION FORMATIONS (3 CARTES PAR LIGNE) ==================== */

/* 1. Sur ordinateur : Force exactement 3 colonnes */
#formations .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* C'est ici qu'on définit les 3 colonnes */
    gap: 2rem;
    justify-items: center;
    max-width: 1200px;
    margin: 3rem auto;
}

/* 2. Adaptation pour Tablettes (si l'écran devient plus petit) */
@media (max-width: 992px) {
    #formations .team-grid {
        grid-template-columns: repeat(2, 1fr); /* Passe à 2 colonnes pour rester lisible */
    }
}

/* 3. Adaptation Mobile */
@media (max-width: 600px) {
    #formations .team-grid {
        grid-template-columns: 1fr; /* 1 seule colonne sur téléphone */
    }
}

/* --- STYLE COMITÉS (VERSION FRANÇAISE) --- */

.committee-card {
    height: 100%; /* Hauteur uniforme */
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem;
    text-align: center; /* Centre les titres et icônes */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: rgba(13, 11, 86, 0.4); /* Fond légèrement plus foncé */
}

/* En-tête de la carte */
.committee-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.committee-header i {
    font-size: 3rem;
    color: var(--accent-blue);
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
}

.committee-header h3 {
    font-size: 2rem;
    color: var(--white);
    margin: 0 0 0.5rem 0;
    font-weight: 800;
}

.committee-header .sub-title {
    font-size: 0.95rem;
    color: var(--accent-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
}

/* Texte de description */
.committee-desc {
    font-size: 1rem;
    color: #e5e7eb; /* Gris clair très lisible */
    line-height: 1.7;
    text-align: justify; /* Justifie le texte pour faire "propre" */
    margin: 0;
}

/* --- STYLE DES IMAGES DE COMITÉS --- */

/* Conteneur de l'image (le cercle) */
.committee-img-wrapper {
    width: 100px;       /* Taille du cercle */
    height: 100px;
    margin: 0 auto 1.5rem; /* Centré horizontalement + marge en bas */
    border-radius: 50%;    /* Rend l'image ronde */
    overflow: hidden;      /* Cache ce qui dépasse */
    
    /* Style Néon / Glass */
    border: 2px solid var(--accent-blue);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); /* Lueur bleue */
    background: rgba(0, 0, 0, 0.3); /* Fond sombre si l'image est transparente */
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* L'image elle-même */
.committee-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit tout le cercle sans être déformée */
    object-position: center;
}

/* Animation au survol de la carte */
.committee-card:hover .committee-img-wrapper {
    transform: scale(1.1); /* Zoom léger */
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.8); /* La lueur devient intense */
    border-color: #fff; /* La bordure devient blanche */
}

/* ==================== PARTENAIRES INFINIS (STYLE IMAGE) ==================== */

#partners {
    padding: 4rem 0;
    overflow: hidden; /* Important : Cache les barres de défilement */
    position: relative;
    background: transparent; /* Ou votre couleur de fond si nécessaire */
}

/* 1. Le conteneur avec effet de fondu sur les côtés */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    /* Masque dégradé pour adoucir les bords gauche et droite */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* 2. La piste qui s'anime */
.slider-track {
    display: flex;
    width: max-content; /* S'adapte à la longueur totale des éléments */
    gap: 2rem; /* Espace entre les carrés */
    animation: scrollInfinite 30s linear infinite; /* Animation continue */
}

/* Pause de l'animation au survol de la souris */
.slider-track:hover {
    animation-play-state: paused;
}

/* 3. Le Carré (Style inspiré de votre image) */
.slide {
    width: 160px;  /* Largeur fixe */
    height: 160px; /* Hauteur fixe pour faire un carré */
    flex-shrink: 0; /* Empêche le rétrécissement */
    
    /* Style Glassmorphism Bleu Nuit */
    background: rgba(13, 11, 86, 0.6); 
    border: 1px solid var(--accent-blue); /* Bordure bleue brillante */
    border-radius: 20px; /* Coins arrondis */
    
    /* Centrage du logo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    
    /* Effets visuels */
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2), inset 0 0 20px rgba(59, 130, 246, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol d'un partenaire */
.slide:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), inset 0 0 30px rgba(59, 130, 246, 0.3);
    border-color: #fff; /* La bordure devient blanche */
    z-index: 10;
}

/* 4. L'image du logo */
.slide img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; /* L'image ne sera pas déformée */
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); /* Légère ombre pour détacher le logo */
}

/* 5. L'Animation Clé (0% à -50%) */
/* Comme on a doublé le contenu, aller à -50% revient exactement au début visuellement */
@keyframes scrollInfinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Déplace la moitié de la piste (un set complet) */
    }
}

/* RESPONSIVE : Plus petits sur mobile */
@media (max-width: 768px) {
    .slide {
        width: 120px;
        height: 120px;
        border-radius: 15px;
    }
    .slider-track {
        gap: 1.5rem;
    }
}

/* ==================== MODIFICATION TAILLE POSTER SAHARA ==================== */

/* Cible l'image spécifiquement dans la section Hackathon */
#hackathon .image-wrapper {
    /* La valeur par défaut est 600px */
    max-width: 450px;  /* <--- Changez ce chiffre pour agrandir ou réduire */
    margin: 0 auto;    /* Garde l'image centrée */
}

/* ==================== COMMITTEES CORRECTION (LARGEUR AUGMENTÉE) ==================== */

/* 1. LE CONTENEUR GLOBAL */
#committees-section .team-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3rem !important;
    
    /* IMPORTANT : Si vous élargissez les cartes, augmentez ceci aussi 
       pour que les 3 cartes rentrent sur la ligne.
       Exemple : passez de 1200px à 1300px ou 1400px */
    max-width: 1350px !important; 
    
    margin: 3rem auto !important;
}

/* 2. LA CARTE ELLE-MÊME (C'est ici qu'on change la largeur) */
#committees-section .book {
    /* CHANGEZ CE CHIFFRE POUR LA LARGEUR (ex: 380px) */
    flex: 0 0 380px !important; 
    
    /* Ajustez la hauteur proportionnellement si besoin */
    height: 350px !important;   
    
    margin: 0 !important;
    position: relative !important; /* Nécessaire pour l'image */
}

/* 3. L'IMAGE (PLEINE TAILLE) */
#committees-section .book .cover {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

#committees-section .book .cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important; /* ou 'cover' selon votre préférence */
    padding: 0 !important;
    background: transparent !important;
    border-radius: 20px;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    #committees-section .team-grid {
        max-width: 900px !important; /* Passe à 2 cartes */
    }
}

@media (max-width: 768px) {
    #committees-section .team-grid {
        max-width: 100% !important;
    }
    #committees-section .book {
        flex: 0 0 300px !important; /* Taille réduite sur mobile */
    }
}

/* ==================== CHAIR BOARD CENTRAGE ==================== */

/* On cible spécifiquement la grille de la section Chair Board */
#chair .team-grid {
    display: flex !important;           /* Remplace Grid par Flex pour permettre le centrage */
    flex-wrap: wrap !important;         /* Permet aux cartes de passer à la ligne */
    justify-content: center !important; /* C'est LA commande magique qui centre tout */
    gap: 2rem !important;               /* Espace entre les cartes */
    max-width: 1400px !important;       /* Largeur max pour ne pas trop étirer */
    margin: 3rem auto !important;       /* Centre le bloc entier */
}

/* On force une largeur fixe pour que l'alignement soit propre */
#chair .book {
    flex: 0 0 280px !important; /* Largeur standard de vos cartes */
    margin: 0 !important;
}

/* RESPONSIVE : Adaptation pour les petits écrans */
@media (max-width: 768px) {
    #chair .team-grid {
        gap: 1.5rem !important;
    }
    #chair .book {
        flex: 0 0 300px !important; /* Un peu plus large sur mobile */
    }
}

/* ==================== CORRECTION VITESSE & INFINI ==================== */

/* 1. Configuration de base pour les deux sliders */
.slider-track {
    animation: scrollInfinite 60s linear infinite !important;
    display: flex;
    width: max-content;
    gap: 2rem;
}

/* 2. Configuration spécifique pour le sens inverse (Media) */
.slider-track.reverse-track {
    animation: scrollReverse 60s linear infinite !important;
}

/* 3. Définition des animations */

/* Défilement vers la GAUCHE (Partenaires) */
@keyframes scrollInfinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* Défilement vers la DROITE (Media) */
@keyframes scrollReverse {
    0% { transform: translateX(-50%); } /* Commence décalé */
    100% { transform: translateX(0); }  /* Revient à 0 */
}

/* Pause au survol pour les deux */
.slider-track:hover, 
.slider-track.reverse-track:hover {
    animation-play-state: paused !important;
}

/* ==================== NAV BUTTONS TRANSPARENTS ==================== */

.nav-menu a {
    background: transparent !important;       /* Enlève toute couleur de fond */
    backdrop-filter: none !important;         /* Enlève l'effet de flou/verre */
    box-shadow: none !important;              /* Enlève les ombres éventuelles */
    border: 1px solid transparent !important; /* (Optionnel) Enlève la bordure si présente */
}

/* Si vous voulez AUSSI enlever le fond gris au survol de la souris, ajoutez ceci : */
.nav-menu a:hover, .nav-menu a.active {
    background: transparent !important;
    color: var(--accent-blue) !important; /* Change juste la couleur du texte au survol */
    box-shadow: none !important;
}

/* ==================== AJOUTS FOOTER (Quick Access) ==================== */

/* Ajustement de l'espacement global pour faire tenir 4 colonnes */
.footer-content {
    gap: 4rem !important; /* Réduit l'espace (était à 15%) pour faire tenir la nouvelle colonne */
    justify-content: space-between;
}

/* Style de la liste de liens */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    color: var(--gray);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espace entre la petite flèche et le texte */
}

/* Effet au survol : changement de couleur et décalage vers la droite */
.footer-links a:hover {
    color: var(--accent-blue);
    transform: translateX(5px);
}

/* Petite flèche décorative avant le lien (Optionnel mais joli) */
.footer-links a i {
    font-size: 0.7rem;
    color: var(--accent-blue);
    opacity: 0.7;
}

/* RESPONSIVE : Sur tablette/mobile, on gère l'espacement */
@media (max-width: 1024px) {
    .footer-content {
        gap: 2rem !important;
    }
}

/* ==================== HEADER SPÉCIFIQUE À PROPOS ==================== */
.about-header-bg {
    /* Remplacez 'lien-de-votre-image.jpg' par le chemin réel de votre image */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.8)), 
                url('about club - Copie.png');
    
    background-size: cover;       /* L'image couvre toute la zone */
    background-position: center;  /* L'image est centrée */
    background-repeat: no-repeat;
    
    /* Optionnel : Laisse l'image fixe quand on scrolle (effet sympa) */
    background-attachment: fixed; 
}

/* ==================== HEADER SPÉCIFIQUE ÉQUIPE ==================== */
.team-header-bg {
    /* Remplacez 'team-background.jpg' par le chemin de votre image */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.9)), 
                url('landing page - Copie.png'); 
    
    background-size: cover;       /* L'image couvre toute la zone */
    background-position: center;  /* L'image est centrée */
    background-repeat: no-repeat;
    
    /* Optionnel : Laisse l'image fixe quand on scrolle (effet moderne) */
    background-attachment: fixed; 
}

/* ==================== HEADER SPÉCIFIQUE ÉVÉNEMENTS 2025 ==================== */
.events2025-header-bg {
    /* Remplacez 'votre-image-event.jpg' par le chemin réel de votre image */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.9)), 
                url('day\ 1.png'); /* Exemple avec une image existante */
    
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat;
    background-attachment: fixed; /* L'effet "fixe" moderne */
}

/* ==================== HEADER SPÉCIFIQUE HOW TO APPLY ==================== */
.apply-header-bg {
    /* Remplacez 'votre-image-apply.jpg' par le chemin réel de votre image */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.9)), 
                url('debat.png'); /* Exemple, mettez votre image ici */
    
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat;
    background-attachment: fixed; /* Effet fixe moderne */
}

/* ==================== HEADER SPÉCIFIQUE CONTACT ==================== */
/* On utilise les deux classes collées pour être sûr de remplacer l'image de hero-2026 */
.hero-2026.contact-header-bg {
    /* Remplacez 'votre-image-contact.jpg' par le chemin réel de votre image */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.9)), 
                url('session\ 8.JPG'); /* Mettez votre image ici */
    
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ==================== HEADER SPÉCIFIQUE APPLICATION FORM ==================== */
.form-header-bg {
    /* Remplacez 'votre-image-form.jpg' par le chemin réel de votre image */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.9)), 
                url('session 8.JPG'); /* Exemple, mettez votre image ici */
    
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat;
    background-attachment: fixed; /* Effet fixe moderne */
}

/* ==================== UNIFICATION DES HEADERS (STYLE HERO 2026) ==================== */

/* 1. Configuration Commune pour TOUS les headers */
.about-header-bg,
.team-header-bg,
.events2025-header-bg,
.apply-header-bg,
.form-header-bg {
    /* Mêmes dimensions que events-2026 */
    min-height: 80vh !important;
    padding: 8rem 5% 4rem !important;
    
    /* Centrage parfait du contenu */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* Paramètres de l'image de fond (Fixe/Cover) */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important; /* L'effet clé */
    
    /* Couleur du texte */
    color: var(--white);
}

/* 2. Définition des Images Spécifiques (Mise à jour) */

/* Page À Propos */
.about-header-bg {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(13, 11, 86, 0.9)), 
                url('about club - Copie.png');
}

/* Page Team */
.team-header-bg {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.9)), 
                url('day\ 1.png');
}

/* Page Événements 2025 */
.events2025-header-bg {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.9)), 
                url('closing.png');
}

/* Page How to Apply */
.apply-header-bg {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.9)), 
                url('session\ 2.png');
}

/* Page Formulaire */
.form-header-bg {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(13, 11, 86, 0.9)), 
                url('session 8.JPG');
}

/* ==================== HACKATHON TABS ==================== */

.gallery-tabs-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--gray);
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tab-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    color: var(--white);
    transform: translateY(-3px);
    border-color: var(--accent-blue);
}

/* État Actif (Bouton sélectionné) */
.tab-btn.active {
    background: linear-gradient(135deg, var(--accent-blue), var(--royal-blue));
    color: var(--white);
    border-color: var(--accent-blue);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* Animation d'apparition du contenu */
.tab-content {
    animation: fadeEffect 1s;
}

@keyframes fadeEffect {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* Ajustement pour les vidéos dans la grille */
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==================== GALERIE ORGANISÉE (FIX) ==================== */

/* 1. La Grille Principale */
.masonry-grid {
    display: grid;
    /* Crée des colonnes qui s'adaptent : minimum 250px de large */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem; /* Espace entre les photos */
    padding: 1.5rem 0;
    width: 100%;
}

/* 2. La Carte de l'image (Le cadre) */
.masonry-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(0,0,0,0.3); /* Fond sombre */
    border: 1px solid rgba(255,255,255,0.1); /* Bordure fine */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    
    /* Important pour ne pas déformer */
    height: 300px; /* On force une hauteur uniforme pour l'élégance */
}

/* 3. L'Image elle-même (Pour qu'elle ne soit pas géante) */
.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Coupe l'image proprement pour remplir le cadre */
    object-position: center;
    transition: transform 0.5s ease;
    display: block; /* Supprime les petits espaces blancs */
}

/* Effet au survol */
.masonry-item:hover {
    border-color: var(--accent-blue);
    transform: translateY(-5px);
}

.masonry-item:hover img {
    transform: scale(1.1); /* Zoom léger */
}

.masonry-item:hover .overlay { opacity: 1; }

.masonry-item .overlay i {
    color: white;
    font-size: 2rem;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.masonry-item:hover .overlay i { transform: scale(1); }

/* ==================== LIGHTBOX (OBLIGATOIRE) ==================== */
.lightbox {
    display: none; /* C'est cette ligne qui cache le "x" par défaut ! */
    position: fixed;
    z-index: 9999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.3);
    animation: zoomIn 0.3s;
}

@keyframes zoomIn {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* Le style du bouton "x" */
.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-lightbox:hover {
    color: var(--accent-blue);
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    font-size: 1.1rem;
}

/* ==================== HACKATHON GALLERY : FORMAT PAYSAGE ==================== */

/* Conteneur de scroll (reste le même) */
.hackathon-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding: 2rem 5%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    justify-content: flex-start;
}

/* Scrollbar (reste la même) */
.hackathon-scroll-container::-webkit-scrollbar { height: 8px; }
.hackathon-scroll-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
.hackathon-scroll-container::-webkit-scrollbar-thumb { background: var(--accent-blue); border-radius: 10px; }

/* --- LA CARTE (Nouvelles Dimensions Paysage) --- */
.hackathon-card {
    /* MODIFICATION ICI : Format Large (Paysage) */
    flex: 0 0 400px; /* Largeur fixe plus grande */
    width: 400px;
    height: 270px;   /* Hauteur réduite pour le format paysage */
    
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    
    /* Style Bordure Néon */
    border: 2px solid var(--accent-blue);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
    background: #000;
    
    transition: all 0.4s ease;
}

/* Effet au survol */
.hackathon-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
    border-color: #fff;
    z-index: 10; /* Passe au-dessus des autres */
}

/* --- L'IMAGE --- */
.hackathon-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit tout le cadre sans déformation */
    display: block;
    transition: transform 0.5s ease;
}

/* Zoom léger au survol */
.hackathon-card:hover img {
    transform: scale(1.05);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .hackathon-card {
        /* Sur mobile, on réduit un peu la taille pour que ça rentre mieux */
        flex: 0 0 300px;
        width: 300px;
        height: 200px;
    }
}


.featured-gallery {
    max-width: 1000px;
    margin: 0 auto;
}

.main-photo img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.main-photo img:hover {
    transform: scale(1.02);
}

.thumbnail-row {
    display: flex;
    gap: 10px;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 10px;
}

.thumbnail-row .thumbnail {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.thumbnail-row .thumbnail:hover {
    opacity: 1;
    transform: scale(1.05);
}

.thumbnail-row .thumbnail.active {
    border: 3px solid var(--primary-color, #ff6600);
    opacity: 1;
}

/* Tabs style */
.tab-btn {
    padding: 0.6rem 1.5rem;
    margin: 0 5px;
    border: none;
    background-color: #050018;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.3s;
}

.tab-btn.active {
    background-color: var(--primary-color, #ff6600);
    color: #fff;
}


#committees-section .book {
    aspect-ratio: 1 / 1; /* perfect square */
}


.hero-logo {
    height: 130px; /* bigger logo */
    width: auto;
    margin-top: 5px;
}



/* Apply button only */
.nav-menu .apply-btn > a {
    background-color: #3B82F6;  /* blue background */
    color: #ffffff;              /* white text for contrast */
    padding: 0.8rem 1rem;
    border-radius: 8px;          /* rounded corners */
    border: 2px solid #fcfafa;   /* make border always visible */
    transition: background 0.3s, border 0.3s;
}

/* Hover effect */
.nav-menu .apply-btn > a:hover {
    background-color: #000000; /* black on hover */
    border-color: #ffffff;     /* change border on hover if you want */
    color: #ffffff;            /* keep text visible */
}

.edition-section {
    display: flex;
    flex-direction: column; /* stack text then video vertically */
    align-items: center;    /* center horizontally */
    gap: 2rem;              /* space between text and video */
}

.text-content {
    max-width: 800px;       /* keeps text readable */
    text-align: center;     /* center text (optional) */
}

.big-video video {
    width: 100%;            /* full width of container */
    max-width: 1000px;      /* bigger max width */
    height: auto;           /* maintain aspect ratio */
    border-radius: 10px;    /* optional rounded corners */
    display: block;
    margin: 0 auto;
}

.conditions-checklist {
    list-style: none;
    max-width: 900px;
    margin: 3rem auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.conditions-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;

    padding: 1.6rem 2rem;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(59, 130, 246, 0.25);

    backdrop-filter: blur(8px);
    transition: background 0.3s ease, transform 0.3s ease;
}

.conditions-checklist li:hover {
    background: rgba(59, 130, 246, 0.08);
    transform: translateX(6px);
}

/* Checkmark (pure CSS, no icons) */
.checkmark {
    width: 18px;
    height: 18px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
    position: relative;
    flex-shrink: 0;
}

.checkmark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.conditions-checklist h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--white);
}

.conditions-checklist p {
    color: var(--gray);
    font-size: 1rem;
    line-height: 1.6;
}

/* Section container */
.formations-mun-section {
    padding: 4rem 5%;
     background: linear-gradient(135deg, var(--black) 0%, var(--royal-blue) 100%);
}

/* Header */
.formations-mun-title {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #1e40af;
}

.formations-mun-header p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    color: #fcfbfb;
}

/* Grid layout */
.formations-mun-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

/* Card styling */
.formation-mun-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.formation-mun-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Image inside card */
.formation-mun-card img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Card content */
.formation-mun-info {
    padding: 1rem;
}

.formation-mun-info h3 {
    margin: 0 0 0.5rem 0;
    color: #1e40af;
}

.formation-mun-info p {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
}